<template>
	<!-- //语音动画 -->
	<view class="voice_an" v-if="isShow" :style="{'background':voiceBgColor}">
		<view class="voice_an_icon">
			<view id="one" class="wave"></view>
			<view id="two" class="wave"></view>
			<view id="three" class="wave"></view>
			<view id="four" class="wave"></view>
			<view id="five" class="wave"></view>
			<view id="six" class="wave"></view>
			<view id="seven" class="wave"></view>
		</view>
		<view class="text">{{titleText}}</view>
	</view>
</template>

<script>
	export default {
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			titleText: {
				type: String,
				default: '正在录音...'
			},
			voiceBgColor: {
				type: String,
				default: ''
			}

		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.voice_an {
		width: 300rpx;
		height: 300rpx;
		position: fixed;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -55%);
		//background-color: rgba(41, 41, 41, 0.7);
		//background-color: #05C160;
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		border-radius: 30rpx;

		.text {
			padding-top: 30rpx;
		}

		@keyframes runVoice {
			0% {
				height: 10%;
			}

			20% {
				height: 50%;
			}

			50% {
				height: 100%;
			}

			80% {
				height: 50%;
			}

			100% {
				height: 0%;
			}
		}

		.wave {
			width: 6rpx;
			height: 100%;
			margin-left: 10rpx;
			border-radius: 50rpx;
			// background-color: #999;
			background-color: #468231;
			vertical-align: middle;
			display: inline-block;
		}

		.voice_an_icon {
			width: 200rpx;
			height: 100rpx;
			line-height: 50rpx;
			margin: 50rpx 0;
		}

		.voice_an_icon #one {
			animation: runVoice 0.6s infinite 0.1s;
		}

		.voice_an_icon #two {
			animation: runVoice 0.6s infinite 0.3s;
		}

		.voice_an_icon #three {
			animation: runVoice 0.6s infinite 0.6s;
		}

		.voice_an_icon #four {
			animation: runVoice 0.6s infinite 0.1s;
		}

		.voice_an_icon #five {
			animation: runVoice 0.6s infinite 0.3s;
		}

		.voice_an_icon #six {
			animation: runVoice 0.6s infinite 0.6s;
		}

		.voice_an_icon #seven {
			animation: runVoice 0.6s infinite 0.1s;
		}
	}
</style>
